<template>
  <div class="remarks-container">
    <el-table
      :data="listData"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      class="fb-table"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <EmptyPlaceholder slot="empty" mode="table" />
      <el-table-column label="序号" type="index" min-width="120" align="left" />
      <el-table-column label="类别" min-width="120" align="left">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.isRemarks ? '特殊备注' : '追加说明'" />
        </template>
      </el-table-column>
      <el-table-column label="问题类型" min-width="120" align="left">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.type | formatQuestionType" />
        </template>
      </el-table-column>
      <el-table-column label="标题" min-width="120" align="left">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.content" />
        </template>
      </el-table-column>
      <el-table-column label="选项" min-width="120" align="left">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.selectList" :open-delay="800" placement="top-start">
            <div slot="content" style="max-width:200px;">
              <span class="tooltip-scroll" v-html="renderSelectList(scope.row.selectList)"/>
            </div>
            <div v-html="renderSelectList(scope.row.selectList)" />
          </el-tooltip>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="是否必填" min-width="120" align="left">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.required ? '是' : '否'" />
        </template>
      </el-table-column>
      <el-table-column label="是否高亮" min-width="120" align="left">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.highlight ? '是' : '否'" />
        </template>
      </el-table-column>
    </el-table>
    <template v-if="data.length > 10">
      <el-row v-if="showMobilePage" type="flex" justify="end">
        <el-pagination
          v-show="data.length > 0"
          :current-page="page"
          :page-size="perPage"
          :total="data.length"
          :page-sizes="[10, 20, 50, 100]"
          :layout="pageLayout"
          :small="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
      <el-row v-else type="flex" justify="end">
        <el-pagination
          v-show="data.length > 0"
          :current-page="page"
          :page-size="perPage"
          :total="data.length"
          :page-sizes="[10, 20, 50, 100]"
          :layout="showMobilePage ? pageLayout : 'total, prev, pager, next, sizes, jumper'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </template>
  </div>
</template>

<script>
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { formatQuestionType } from '@/filters/status';
import mobileTable from '@/mixins/mobileTable';
export default {
  components: {
    EmptyPlaceholder
  },
  filters: {
    formatQuestionType
  },
  mixins: [mobileTable],
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      page: 1,
      perPage: 10
    };
  },
  computed: {
    listData() {
      return this.data.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    }
  },
  methods: {
    renderSelectList(list) {
      return list.map((item, index) => `${index + 1}. ${item.label}`).join('<br>');
    },
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
    }
  }
};
</script>

<style lang="scss" scoped>
.remarks-container {
  margin-top: 10px;
}
</style>
